טעינת משאבים איתנה בריאקט: שליטה ב-Error Boundaries באמצעות Hooks

באפליקציות ווב מודרניות, טעינת משאבים באופן אסינכרוני היא פרקטיקה נפוצה. בין אם מדובר באחזור נתונים מ-API, טעינת תמונות או ייבוא מודולים, טיפול בשגיאות פוטנציאליות במהלך טעינת המשאבים הוא חיוני לחוויית משתמש חלקה. Error Boundaries בריאקט מספקים מנגנון לתפיסת שגיאות JavaScript בכל מקום בעץ הקומפוננטות הצאצאות שלהם, לתיעוד שגיאות אלו, ולהצגת UI חלופי במקום קריסה של כל האפליקציה. מאמר זה בוחן כיצד להשתמש ב-Error Boundaries ביעילות בשילוב עם React Hooks לניהול שגיאות בטעינת משאבים.

הבנת Error Boundaries

לפני ריאקט 16, שגיאות JavaScript שלא טופלו במהלך רינדור קומפוננטה היו עלולות להשחית את המצב הפנימי של ריאקט ולגרום לשגיאות סתומות ברינדורים הבאים. Error Boundaries מטפלים בבעיה זו על ידי כך שהם פועלים כבלוקים שתופסים את כל השגיאות המתרחשות בקומפוננטות הצאצאות שלהם. הם קומפוננטות ריאקט המממשות אחת משתי מתודות מחזור החיים הבאות, או את שתיהן:

• static getDerivedStateFromError(error): מתודה סטטית זו נקראת לאחר ששגיאה נזרקה על ידי קומפוננטה צאצאית. היא מקבלת את השגיאה שנזרקה כארגומנט ומחזירה ערך לעדכון ה-state של הקומפוננטה.
• componentDidCatch(error, info): מתודת מחזור חיים זו נקראת לאחר ששגיאה נזרקה על ידי קומפוננטה צאצאית. היא מקבלת את השגיאה שנזרקה כארגומנט, וכן אובייקט המכיל מידע על איזו קומפוננטה זרקה את השגיאה. ניתן להשתמש בה לתיעוד מידע על השגיאה.

חשוב לציין, Error Boundaries תופסים שגיאות רק בשלב ה-רינדור, במתודות מחזור חיים, ובבנאים של כל העץ שמתחתיהם. הם אינם תופסים שגיאות עבור:

• מטפלי אירועים (event handlers) (למדו עוד בחלק הבא)
• קוד אסינכרוני (למשל, קריאות חוזרות של setTimeout או requestAnimationFrame)
• רינדור בצד השרת (Server-side rendering)
• שגיאות שנזרקות ב-Error Boundary עצמו (ולא בצאצאיו)

Error Boundaries ו-React Hooks: שילוב עוצמתי

בעוד שקומפוננטות מבוססות מחלקה (class components) שימשו באופן מסורתי למימוש Error Boundaries, React Hooks מציעים גישה תמציתית ופונקציונלית יותר. אנו יכולים ליצור hook רב-פעמי בשם useErrorBoundary שמכמסל את לוגיקת הטיפול בשגיאות ומספק דרך נוחה לעטוף קומפוננטות שעלולות לזרוק שגיאות במהלך טעינת משאבים.

יצירת Hook מותאם אישית useErrorBoundary

הנה דוגמה ל-hook useErrorBoundary:

            import { useState, useCallback } from 'react';

function useErrorBoundary() {
  const [error, setError] = useState(null);

  const resetError = useCallback(() => {
    setError(null);
  }, []);

  const captureError = useCallback((e) => {
    setError(e);
  }, []);

  const ErrorBoundary = useCallback(({ children, fallback }) => {
    if (error) {
      return fallback ? fallback : 
An error occurred: {error.message || String(error)}
;
    }
    return children;
  }, [error]);

  return { ErrorBoundary, captureError, error, resetError };
}

export default useErrorBoundary;

            

              
                Copy
              
            
          

הסבר:

• useState: אנו משתמשים ב-useState כדי לנהל את מצב השגיאה. בתחילה, הוא מגדיר את השגיאה ל-null.
• useCallback: אנו משתמשים ב-useCallback כדי לבצע ממואיזציה (memoize) לפונקציות resetError ו-captureError. זוהי פרקטיקה טובה למניעת רינדורים מחדש מיותרים אם פונקציות אלו מועברות כ-props.
• קומפוננטת ErrorBoundary: זוהי קומפוננטה פונקציונלית שנוצרה עם useCallback שמקבלת children ו-prop אופציונלי של fallback. אם קיימת שגיאה ב-state, היא מרנדרת את קומפוננטת ה-fallback שסופקה או הודעת שגיאה ברירת מחדל. אחרת, היא מרנדרת את ה-children. זה פועל כ-Error Boundary שלנו. מערך התלויות `[error]` מבטיח שהיא תתעדכן מחדש כאשר מצב ה-`error` משתנה.
• פונקציית captureError: פונקציה זו משמשת להגדרת מצב השגיאה. תקראו לה בתוך בלוק try...catch בעת טעינת משאבים.
• פונקציית resetError: פונקציה זו מנקה את מצב השגיאה, ומאפשרת לקומפוננטה לרנדר מחדש את צאצאיה (ובכך אולי לנסות שוב את טעינת המשאבים).

מימוש טעינת משאבים עם טיפול בשגיאות

כעת, בואו נראה כיצד להשתמש ב-hook זה לטיפול בשגיאות טעינת משאבים. נבחן קומפוננטה שמביאה נתוני משתמש מ-API:

            import React, { useState, useEffect } from 'react';
import useErrorBoundary from './useErrorBoundary';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const { ErrorBoundary, captureError, error, resetError } = useErrorBoundary();

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(`https://api.example.com/users/${userId}`);
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        setUser(data);
      } catch (e) {
        captureError(e);
      }
    };

    fetchData();
  }, [userId, captureError]);

  if (error) {
    return (
      Failed to load user data. Retry